<template>
    <div class="app-container">
        <el-descriptions title="批次信息" :column="4" border>
                <el-descriptions-item label="批次号" label-class-name="my-label">{{ orderDetail.batchNumber
                    }}</el-descriptions-item>
                <el-descriptions-item label="批次状态" label-class-name="my-label">
                    {{ getStatus }}</el-descriptions-item>
                <el-descriptions-item label="分配时间" label-class-name="my-label">{{ orderDetail.groupTime ?
                    orderDetail.groupTime : '-'
                    }}</el-descriptions-item>
                <el-descriptions-item label="创建时间" label-class-name="my-label">{{ orderDetail.createTime
                    }}</el-descriptions-item>
                <el-descriptions-item label="产品名称" label-class-name="my-label">{{ orderDetail.productName
                    }}</el-descriptions-item>
                <el-descriptions-item label="叶片类型" label-class-name="my-label">{{ orderDetail.bladeType
                    }}</el-descriptions-item>
                <el-descriptions-item label="生产小组" label-class-name="my-label">{{ orderDetail.groupName ?
                    orderDetail.groupName : '-'
                    }}</el-descriptions-item>
                <el-descriptions-item label="完成时间" label-class-name="my-label">
                    {{ orderDetail.status == '40' ? orderDetail.statusTime : '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="生产备注" label-class-name="my-label">
                    <el-input v-model="orderDetail.remarkProd" placeholder="请输入"> </el-input>
                </el-descriptions-item>
            </el-descriptions>
        <div>
            <div class="title">产品明细</div>
            <!-- 表格 -->
            <el-table v-loading="loading" :data="orderDetail.productList" :summary-method="getSummaries" show-summary>
                <el-table-column type="selection" width="70" align="center" />
                <el-table-column label="客户" prop="orderCustomerName" width="120" />
                <el-table-column label="序号" prop="serialNumber" width="80" />
                <el-table-column label="安装宽度" prop="sizeWidthWx" width="100" />
                <el-table-column label="安装高度" prop="sizeHeightWx" width="100" />
                <el-table-column label="产品件数" prop="productCount" width="100" />
                <el-table-column label="成品宽度" prop="sizeWidthSub" width="100" />
                <el-table-column label="成品高度" prop="sizeHeightSub" width="100" />
                <el-table-column label="驱动方式" prop="driveMode" width="100" />
                <el-table-column label="外框颜色" prop="color" width="100" />
                <el-table-column label="叶片颜色" prop="bladeColor" width="100" />
                <el-table-column label="备注" prop="remarkProd" width="100" />
                <el-table-column v-for="(item, index) in orderDetail.productParamList" :key="index"
                    :label="item.paramName" min-width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row[item.fv] }}</div>
                        <!-- <input type="text" v-model="scope.row[item.fv]" placeholder="请输入"> -->
                    </template>
                </el-table-column>

            </el-table>

        </div>

        <div>
            <div class="title">生产工序</div>
            <table style="width: 100%;border: 1px solid #eee;" class="tablex">
                <tr>
                    <th>型材切割</th>
                    <th>百叶制作</th>
                    <th>玻璃制作</th>
                    <th>成品组装</th>
                    <th>包装检验</th>
                </tr>
                <tr>
                    <td>{{ orderDetail.stepStatus1 == 1 ? '已完成' : '未完成' }}</td>
                    <td>{{ orderDetail.stepStatus2 == 1 ? '已完成' : '未完成' }}</td>
                    <td>{{ orderDetail.stepStatus3 == 1 ? '已完成' : '未完成' }}</td>
                    <td>{{ orderDetail.stepStatus4 == 1 ? '已完成' : '未完成' }}</td>
                    <td>{{ orderDetail.stepStatus5 == 1 ? '已完成' : '未完成' }}</td>
                </tr>
                <tr>
                    <td>{{ orderDetail.stepStatusTime1 || '-' }}</td>
                    <td>{{ orderDetail.stepStatusTime2 || '-' }}</td>
                    <td>{{ orderDetail.stepStatusTime3 || '-' }}</td>
                    <td>{{ orderDetail.stepStatusTime4 || '-' }}</td>
                    <td>{{ orderDetail.stepStatusTime5 || '-' }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import { getInfo } from '@/api/batch'

export default {
    dicts: ['self_batch_status'],
    name: '',
    data() {
        return {
            loading: false,
            orderDetail: {}

        }
    },
    computed: {
        getStatus() {
            let status = ''
            this.dict.type.self_batch_status.forEach(item => {
                if (item.value == this.orderDetail.status) {
                    status = item.label
                }
            });
            return status
        }
    },
    created() {
        const orderId = this.$route.params && this.$route.params.orderId
        if (orderId) {
            this.loading = true
            getInfo({
                id: orderId
            }).then((result) => {
                console.log(result)
                this.orderDetail = result.data
                this.loading = false
            })
        }
    },
    methods: {
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				} else if (index === 5) {
					const values = data.reduce((prev, curr) => {
						const value3 = Number(curr.productCount);
						if (!isNaN(value3)) {
							return prev + value3;
						} else {
							return prev;
						}
					}, 0)
					sums[index] = values + '件'
				}else {
					sums[index] = '-';
					return;
				}
			});
			return sums;
		},
    },
}
</script>
<style lang='scss' scoped>
.title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin: 10px 0px 20px;
}

.tablex {
    border-collapse: collapse;

    th {
        background-color: #f8f8f9;
        padding: 10px 5px;
        border: 1px solid #eee;
        color: #515a6e;
        font-size: 13px;
    }

    td {
        border: 1px solid #eee;
        text-align: center;
        padding: 5px;
        font-size: 14px;
    color: #606266;
    }
}
</style>